import React, { Component } from 'react'

export default class App extends Component {

    state = {
        flag: false
    }

    render() {


        // 我们可以使用 if else 实现整套模板的显示隐藏
        // if (this.state.flag) {
        //     return (
        //         <div>App 真 </div>
        //     )
        // } else {
        //     return (
        //         <div>App 假</div>
        //     )
        // }


        //不要在 jsx 代码中使用 if else 语句 ,会报错

        // return (
        //     <>
        //         {if(this.state.flag){
        //             <div>App</div>
        //         }}
        //     </>
        // )

        return (
            <>
                <div>App</div>

                {/* 方法一 */}
                {/* 当为真的时候就显示后面的内容 */}
                {this.state.flag && <h1>你笑起来真好看</h1>}

                {/* 当为假的时候显示后面的内容 */}
                {this.state.flag || <h1>像春天的花一样</h1>}


                {/* 方法二 */}
                {/* 通过三目运算 */}
                {this.state.flag ? <h1>为真</h1> : <h1>为假</h1>}

                <button onClick={() => {
                    this.setState({
                        flag: !this.state.flag
                    })
                }}>切换</button>
            </>
        )
    }
}


